<template>
    <div class="mainApp">
        <div class="homePage">
            <div class="userBox clearfix">
                <div class="avatar">
                    <img :src="Avatar? Avatar:defaultAvatar">
                </div>
                <div class="profile">
                    <div>
                        <span class="pro_name">{{TrueName}}</span>
                        <span class="pro_class">{{ClassName}}</span>
                    </div>
                </div>
                <div class="completeProgress">
                    <div class="tit">总体完成度</div>
                    <div class="progress">{{ModuleCompleteCount}}/2</div>
                </div>
            </div>

            <div class="itemListBox">
                <div class="itemBox" @click="gotoProject('profile')">
                    <div class="tit">
                        01 <span>我的档案</span>
                    </div>
                    <div class="state">
                        <div :class="GrowRecordCompleteCount >0 ?'state_info2' :'state_info'"><span v-if="GrowRecordCompleteCount >0" class="processnumber">{{GrowRecordCompleteCount}}/3</span></div>
                        <div class="progressBox">
                            <div class="progressIng" :style="{width:`${progress1}%`}"></div>
                        </div>
                    </div>
                </div>
                <div class="itemBox" @click="gotoProject('term')">
                    <div class="tit">
                        02 <span>第2学期设想</span>
                    </div>
                    <div class="state">
                         <div :class="ImagineRecordCompleteCount >0 ?'state_info2' :'state_info'"><span class="processnumber" v-if="ImagineRecordCompleteCount >0">{{ImagineRecordCompleteCount}}/1</span></div>
                        <div class="progressBox">
                            <div class="progressIng" :style="{width:`${progress2}%`}"></div>
                        </div>
                    </div>
                </div>
                <!-- <div class="itemBox"></div> -->
            </div>
            <div class="itemTips" @click="showTips">
                认真填写，收获属于你的精品成长档案~
            </div>
        </div>
    </div>
</template>

<script>
import {axGet,axPost} from '@/api/index'
import defaultAvatar from '@/assets/img/girl.png'
export default {
    data(){
        return{
            defaultAvatar:defaultAvatar,
            school:localStorage.getItem('school'),
            userid:localStorage.getItem('userid'),
            classCode:localStorage.getItem('classCode'),
            Avatar:null,
            ClassName:'',
            GrowRecordCompleteCount:0,
            ImagineRecordCompleteCount:0,
            ModuleCompleteCount:0,
            TrueName:''

        }
    },
    mounted(){
        this.getInformation()
    },
    computed:{
        progress1(){
            console.log('99999',(this.GrowRecordCompleteCount /3) *100)
            return (this.GrowRecordCompleteCount /3) * 100
        },
         progress2(){
            console.log('99999',(this.ImagineRecordCompleteCount /1) *100)
            return (this.ImagineRecordCompleteCount /1) * 100
        }

    },
    methods:{
        getInformation(){
            axGet('ChangQingGetGrowStatistics',{
                school:this.school,
                userid:this.userid,
                classCode:this.classCode
            }).then((res)=>{
                // console.log('888888---',res)
                if(res.ResultCode === 1){
                    let data = res.Value
                    this.Avatar = data.Avatar
                    this.ClassName = data.ClassName
                    this.GrowRecordCompleteCount =data.GrowRecordCompleteCount
                    this.ImagineRecordCompleteCount = data.ImagineRecordCompleteCount
                    this.ModuleCompleteCount = data.ModuleCompleteCount
                    this.TrueName = data.TrueName
                    localStorage.setItem('name',this.TrueName)
                }
            })  
        },
        showTips(){
            this.$Tips({content:'这里是提示文字',icon:'correct'})
        },
        gotoProject(val){
            if(val === 'profile'){
                this.$router.push('/profile')
            }else if(val === 'term'){
                this.$router.push('/term')
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.homePage{
    width: 100%;
    height: 100%;
    background: linear-gradient(#FFEECB,#FFF 2.8rem);
    .userBox{
        position: relative;
        width: 100%;
        padding:.4rem .3rem;
        .avatar{
            width: 1rem;
            height: 1rem;
            float: left;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .profile{
            width: 50%;
            height: 1rem;
            padding-left: .28rem;
            float: left;
            display: flex;
            align-items:center;
            color: #262727;
            .pro_name{
                padding: .05rem 0;
                font-size: .36rem;
                font-weight: bold;
                display: block;
            }
            .pro_class{
                padding: .05rem 0;
                font-size: .26rem;
                display: block;
            }
        }
        .completeProgress{
            position: absolute;
            top: .4rem;
            right: .3rem;
            text-align: right;
            line-height: .5rem;
            .tit{
                font-size: .24rem;
                color: #7D7F80;
            }
            .progress{
                font-size: .48rem;
                font-weight: bold;
                color: #FFA200;
            }
        }
    }

    .itemListBox{
        width: 100%;
        padding: 0 .3rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .itemBox{
            width: 3.2rem;
            height: 2.1rem;
            padding: .3rem;
            background: url(../assets/img/itemBg.png) #FFF no-repeat bottom left;
            background-size: auto 70%;
            border-radius: .16rem;
            box-shadow: 0 .16rem .48rem rgba($color: #212223, $alpha: .1);
            margin-bottom: .5rem;
            .tit{
                font-size: .36rem; 
                color: #BDBEBF;
                span{
                    font-weight: bold;
                    color: #262727;
                }
            }
            .state{
                margin-top: .25rem;
                .state_info{
                    font-size: .28rem;
                    color: #BDBEBF;

                }
                .state_info::before{
                    content: '未完成';
                }
                .state_info2{
                    font-size: .28rem;
                    color: #262727;
                }
                .state_info2::before{
                    content: '已完成';
                }
                .processnumber{
                    display: inline-block;
                    margin-left: .2rem;
                    font-size: .26rem;
                    color: #168DFF;
                }
                .progressBox{
                    position: relative;
                    width: 100%;
                    height: .2rem;
                    border-radius: .1rem;
                    background: #F8EFDA;
                    margin-top: .2rem;
                    .progressIng{
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: .2rem;
                        border-radius: .1rem;
                        background: linear-gradient(90deg, #FFC53E 0%, #FF973D 100%);
                    }
                }
            }
        }
    }
    .itemTips{
        width: 100%;
        font-size: .24rem;
        color: #AFB1B3;
        text-align: center;
    }
}
</style>